<script setup lang="tsx">
defineOptions({
  name: "sop"
});
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { PxMessage } from "px-ui";
import commonTable from "@/views/common/components/commonTable/index.vue";
import { PxRadioGroup, PxRadio, PxInput } from "px-ui";
import { cloneDeep } from "@pureadmin/utils";

const router = useRouter();

interface Props {
  disabled?: boolean;
  data: Array<Record<string, any>>;
  title: string;
}

const props = withDefaults(defineProps<Props>(), {
  disabled: false,
  data: () => [],
  title: ""
});

const checkListTableRef = ref<HTMLElement | null>(null);
const sopTableRef = ref<InstanceType<typeof commonTable> | null>(null);
const tableCloumns: Array<CommonTable.TableCloumnsType> = [
  {
    label: "排查内容",
    prop: "content",
    width: 300
  },
  {
    label: "状态",
    prop: "status",
    width: 400,
    render({ row }: any) {
      const rowStyle = {
        display: "flex",
        alignItems: "center",
        gap: "6px"
      };
      const inputStyle = {
        flex: "1",
        height: "23px",
        verticalAlign: "top"
      };
      const changeHandler = () => {
        if (row.status === "Y" || row.status === "N") {
          row.result = row.status;
        } else if (row.status === "o") {
          row.result = "";
        }
      };
      return () => {
        return (
          <div style={rowStyle}>
            <PxRadioGroup style={{ height: "23px" }} v-model={row.status} disabled={props.disabled} onChange={changeHandler}>
              <PxRadio style={{ height: "23px" }} label="Y">
                Y
              </PxRadio>
              <PxRadio style={{ height: "23px" }} label="N">
                N
              </PxRadio>
              <PxRadio style={{ height: "23px" }} label="o">
                其他
              </PxRadio>
            </PxRadioGroup>
            {row.status === "o" && (
              <PxInput style={inputStyle} v-model={row.result} disabled={props.disabled} clearable={true} placeholder="请输入" />
            )}
          </div>
        );
      };
    }
  },
  {
    label: "备注",
    prop: "remark",
    width: 300,
    render({ row }: any) {
      return () => (
        <PxInput
          style={{ height: "23px", verticalAlign: "top" }}
          v-model={row.remark}
          disabled={props.disabled}
          clearable={true}
          placeholder="请输入备注"
        />
      );
    }
  }
];

const list = ref<Array<Record<string, any>>>([]);

const toExport = () => {
  const path = "/gas/operation/acidDrumManage/ledgerManage";
  router.push({ path });
};

const validate = (): Promise<Array<any>> => {
  let index = 0;
  const flag = list.value.find((item, ind) => {
    if (!item.result) {
      index = ind;
      return true;
    }
    return false;
  });
  return new Promise((resolve, reject) => {
    if (flag) {
      // 设置滚动位置
      sopTableRef.value?.el && sopTableRef.value.el?.$refs?.scrollBarRef?.setScrollTop(index * 49);
      checkListTableRef.value.scrollIntoView({ behavior: "smooth" });
      const message = `请完善 ${props.title} 第 ${index + 1} 行： ${flag.content} ！`;
      PxMessage({
        message,
        type: "error",
        showClose: true,
        duration: 6000
      });
      throw reject(message);
    }
    resolve(cloneDeep(list.value));
  });
};

const init = () => {
  list.value.splice(0);
  list.value = cloneDeep(props.data).map(item => {
    const { result } = item;
    if (result === "Y" || result === "N") {
      item.status = result;
    } else if (result) {
      item.status = "o";
    } else {
      item.status = "";
    }
    return item;
  });
};

onMounted(() => {
  init();
});

defineExpose({
  list,
  validate
});
</script>

<template>
  <div ref="checkListTableRef" class="check-list-table">
    <commonTable ref="sopTableRef" v-model="list" indexNeed :pagination="false" :tableCloumns="tableCloumns" :maxHeight="320">
      <template #emptyBottom>
        <px-button type="primary" plain @click="toExport">去台账导入</px-button>
      </template>
    </commonTable>
  </div>
</template>

<style lang="scss" scoped>
:deep(.px-radio) {
  margin-right: 16px;
}
</style>
